<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style type="text/css">
        body {
            font-size: 3rem;
            margin-left: 5rem;
            margin-top: 10rem;
            background-color: bisque;
        }

        .form-control {
            font-size: 3rem;
 
        }

        button {
            margin-top: 5rem;
            margin-left: 17rem;
        }
        .btn,
        .btn-primary{
            width: 200px;
            font-size: 50px;
        }
        #y {
            top: 3rem;
            left: 3rem;
            position: absolute;
        }

        p {
            margin-top: 50px;
        }

        a {
            text-decoration: none;
        }

        .jing {
            margin-left: -70px;
        }

        #box {
            margin-left: 40px;
        }

        .tui {
            margin-left: -46px;
        }
    </style>
    <script type="text/javascript">
        //页面获取数据
        $(function () {
            refurbishIndex();

        });
        function refurbishIndex() {
            $.ajax({
                type: "get",
                url: "/perlist",
                data: {
                },
                async: false,
                success: function (data) {
                    for (i in data) {
                        $('#id').val(data[i].id);
                        $('#name').val(data[i].name);
                        $('#usercode').val(data[i].usercode);
                        $('#password').val(data[i].password);
                        $('#type').val(data[i].type);
                        $('#sex').val(data[i].sex);
                        $('#grade').val(data[i].grade);
                        $('#phoneNumber').val(data[i].phoneNumber);
                        $('#age').val(data[i].age);
                    }


                }
            });
        }
        function update() {
            console.log("hello world")
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var usercode = document.getElementById("usercode").value;
            var password = document.getElementById("password").value;
            var type = document.getElementById("type").value;
            var sex = document.getElementById("sex").value;
            var grade = document.getElementById("grade").value;
            var phoneNumber = document.getElementById("phoneNumber").value;
            var age = document.getElementById("age").value;
            console.log("修改前" + age + password)
            $.ajax({
                url: './update',
                type: "put",
                async: false,
                data: {
                    'id': id,
                    'name': name,
                    'type': type,
                    'sex': sex,
                    'usercode': usercode,
                    'age': age,
                    'grade': grade,
                    'phoneNumber': phoneNumber,
                    'password': password
                },
                success: function (data) {
                    alert("修改成功")
                },
                error: function (data) {
                    alert("修改失败");
                }
            });
        };
    </script>
</head>

<body>
    <div id="box">
        <form class="form-inline">
            <p class="jing"><label>Number: <input id="id" onfocus='this.blur()' class="form-control"></label></p>
            <p>姓名: <input id="name" class="form-control"></p>
            <p>账号: <input id="usercode" onfocus='this.blur()' class="form-control"></p>
            <p>密码: <input id="password" class="form-control"></p>
            <p>班级: <input id="grade" class="form-control"></p>
            <p>类别: <input id="type" class="form-control"></p>
            <p>性别: <input id="sex" class="form-control"></p>
            <p>年龄: <input id="age" class="form-control"></p>
            <p class="tui">手机号 :<input id="phoneNumber" class="form-control"></p>
        </form>
        <button onclick="update()"class="btn btn-primary">更改</button>
        <a href="person" id="y">返回</a>
        <div id="zixun">
        </div>
    </div>
</body>

</html>